<template>
  <el-popover placement="bottom"
              width="350"
              trigger="click"
              @show="showNotice"
              @hide="hideNotice"
              >
    <el-tabs v-model="activeName">
      <el-tab-pane label="待办任务"
                   name="first"></el-tab-pane>
    </el-tabs>
    <el-scrollbar style="height:300px">
      <avue-notice :data="data"
                   :option="option"
                   @click.native="toTaskList"
                   @page-change="pageChange"></avue-notice>
    </el-scrollbar>
    <div slot="reference">
      <el-badge is-dot>
        <i class="el-icon-bell"></i>
      </el-badge>
    </div>
  </el-popover>
</template>

<script>
import { activeUrl } from "@/config/env";
const urls = {
  list : activeUrl + "/todoTaskList"
}
let list = [];
export default {
  name: "top-notice",
  data () {
    return {
      activeName: 'first',
      option: {
        props: {
          img: 'img',
          title: 'title',
          subtitle: 'subtitle',
          tag: 'tag',
          status: 'status'
        },
      },
      data: [],
      tableData :[],
      formInline: {
        name: null,
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: []   
      },
      page : ""
    }
  },
  created () {

  },
  mounted(){
    
  },
  methods: {
    pageChange (page, done) {
      this.page = page;
      console.log(page)
      //this.formInline.current = page;
      this.getList();
      done();
    },
    showNotice() {
      this.getList();
    },
    hideNotice(){
      this.formInline.current = 1;
      this.data = [];
      this.tableData = [];
      list = [];
    },
    toTaskList() {
      this.$router.push("/b226d28b033333f24862963c2a2f4d5e//24090071c304367452fec1073a94251f");
    },
    getList() {
      axios.post(urls.list, this.formInline ).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        if(data.records.length !== 0) {
            for(var i = 0;i < this.tableData.length ; i++) {
              let obj =  {title :"",subtitle : "",img :"https://avuejs.com/images/logo-bg.jpg"}
              obj.title = this.tableData[i].id + " : " + this.tableData[i].name;
              obj.subtitle = this.timeFormat(this.tableData[i].createTime);
              list.push(obj);
            }
            this.data = this.data.concat(list);
            this.tableData = [];
            list = [];
            this.formInline.current = data.current + 1;
            this.formInline.size = data.size;
            this.formInline.total = data.total;
        }else {
          this.$message({
            message : "没有更多的待办任务了",
            type : "warning"
          })
        }
      });
    },
    timeFormat(createTime) {
    // 工作流时间格式化
    return new Date(+new Date(createTime) + 8 * 3600 * 1000)
      .toISOString()
      .replace(/T/g, " ")
      .replace(/\.[\d]{3}Z/, "");
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
